<template>
    <div>
      <pstep :stepData="stepData" :doneNum="doneNum"  style="margin-bottom: 20px;"></pstep>
      <pform ref="form" :model="form" lw="150">
        <el-form-item label="区域">
          <el-select style="width:233px;" v-model="form.field1" placeholder="请选择区域">
            <el-option label="东南中心" value="dn"></el-option>
            <el-option label="南方中心" value="nf"></el-option>
            <el-option label="北方中心" value="bf"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集群名称">
          <el-input v-model="form.field2" placeholder="请输入" style="width: 233px;"></el-input>
        </el-form-item>
        <el-form-item label="组件选择">
          <div style="display: flex;align-items: flex-end;">
            <el-select style="width:233px;" v-model="form.field3" placeholder="请选择">
              <el-option label="Hadoop分析集群" value="d2"></el-option>
              <el-option label="HBase查询集群" value="dn"></el-option>
              <el-option label="实时分析集群" value="nf"></el-option>
            </el-select>
            <div style="padding-left: 20px;">海量数据分析与查询</div>
          </div>
        </el-form-item>
        <el-form-item label="部署形态">
          <el-radio-group v-model="form.field50">
            <el-radio-button label="独立部署"></el-radio-button>
            <el-radio-button label="集群部署"></el-radio-button>
            <el-radio-button label="物理机部"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="可用区">
          <el-select style="width:233px;" v-model="form.field4" placeholder="请选择可用区">
            <el-option label="可用区1" value="dn"></el-option>
            <el-option label="可用区4" value="nf"></el-option>
            <el-option label="可用区6" value="bf"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="虚拟云VPC">
          <el-select style="width:233px;" v-model="form.field5" placeholder="请选择安全组">
            <el-option label="vcp-default" value="dn"></el-option>
            <el-option label="VC名称" value="nf"></el-option>
          </el-select>
          <el-icon class="el-icon-refresh" style="font-size: 20px;margin: 0 12px;cursor: pointer;"></el-icon>
          <el-button type="text">创建虚拟云VPC</el-button>
        </el-form-item>
        <el-form-item label="子网">
          <el-select style="width:233px;" v-model="form.field6" placeholder="请选择子网">
            <el-option label="subnet-default21" value="dn"></el-option>
            <el-option label="子网名称" value="nf"></el-option>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="CPU架构">
          <el-radio-group v-model="form.field7">
            <el-radio-button label="X86计算"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="集群节点">
          <div style="width: 100%;background-color: #f2f2f2;">
            <el-row :gutter="20">
              <el-col :span="10">
               <div class="item-col">
                 <div class="label">节点组名称</div>
                 <div>master_node_default_group</div>
               </div>
                <div class="item-col">
                  <div class="label">节点类型</div>
                  <div>Master</div>
                </div>
                <div class="item-col">
                  <div class="label">节点数</div>
                  <div><el-input-number size="small" style="width:215px" v-model="form.field8" :min="1" :max="200"></el-input-number></div>
                </div>
                <div class="item-col">
                  <div class="label">实例规格</div>
                  <div>通用计算机增强 16vCPUs | 64GB | c7n.4xlarge.4</div>
                </div>
                <div class="item-col">
                  <div class="label">系统盘</div>
                  <div class="flex-align-center">
                    <el-select style="width:120px;margin-right: 10px;" v-model="form.field9" placeholder="请选择可用区" size="mini">
                      <el-option label="超高IO" value="dn"></el-option>
                    </el-select>
                    <el-input-number size="small" style="width:215px" v-model="form.field10" :min="1" :max="200"></el-input-number>
                    GB
                  </div>
                </div>
                <div class="item-col">
                  <div class="label">数据盘</div>
                  <div class="flex-align-center">
                    <el-select style="width:120px;margin-right: 10px;" v-model="form.field11" placeholder="请选择可用区" size="mini">
                      <el-option label="超高IO" value="dn"></el-option>
                    </el-select>
                    <el-input-number size="small" style="width:215px" v-model="form.field12" :min="1" :max="200"></el-input-number>
                    GB
                  </div>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="item-col">
                  <div class="label">节点组名称</div>
                  <div>master_node_default_group</div>
                </div>
                <div class="item-col">
                  <div class="label">节点类型</div>
                  <div>Master</div>
                </div>
                <div class="item-col">
                  <div class="label">节点数</div>
                  <div><el-input-number size="small" style="width:215px" v-model="form.field14" :min="1" :max="200"></el-input-number></div>
                </div>
                <div class="item-col">
                  <div class="label">实例规格</div>
                  <div>通用计算机增强 16vCPUs | 64GB | c7n.4xlarge.4</div>
                </div>
                <div class="item-col">
                  <div class="label">系统盘</div>
                  <div class="flex-align-center">
                    <el-select style="width:120px;margin-right: 10px;" v-model="form.field12" placeholder="请选择可用区" size="mini">
                      <el-option label="超高IO" value="dn"></el-option>
                    </el-select>
                    <el-input-number size="small" style="width:215px" v-model="form.field13" :min="1" :max="200"></el-input-number>
                    GB
                  </div>
                </div>
                <div class="item-col">
                  <div class="label">数据盘</div>
                  <div class="flex-align-center">
                    <el-select style="width:120px;margin-right: 10px;" v-model="form.field14" placeholder="请选择可用区" size="mini">
                      <el-option label="超高IO" value="dn"></el-option>
                    </el-select>
                    <el-input-number size="small" style="width:215px" v-model="form.field15" :min="1" :max="200"></el-input-number>
                    GB
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="用户名">
          <span>root</span>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.input" type="password" placeholder="请输入" style="width: 233px;"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.input" type="password" placeholder="请输入" style="width: 233px;"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <div class="button-group"><el-button type="primary" @click="onCreat()">立即创建</el-button></div>
      </pform>
    </div>
  </template>
  
  <script>
  import pstep from '@/components/publicStep'
  
  export default {
    name: 'applyHadoopForm',
    components: {pstep},
    data() {
      return {
        stepData:[{num:1, nameIn:'1', nameOut:'基础配置'}],
        doneNum: 1,
        form: {
          field3: 'd2',
          field7: 'X86计算',
          field8: '1',
          field9: '超高IO',
          field10: '1',
          field11: 'dn',
          field12: '1',
          field13: '1',
          field14: 'dn',
          field15: '1',
          field50:'独立部署'
        },
      }
    },
    methods: {
      onCreat() {
        this.$router.push({path: '/passsucserver/distributedFile'})
      }
    }
  }
  </script>
  
  <style scoped lang="less">
    .flex-align-center {
      display: flex;
      align-items: center;
    }
    .button-group {
      display: flex;
      justify-content: flex-end;
      padding: 20px;
    }
    .item-col {
      display: flex;
      .label {
        width: 110px;
        flex: 0 0 110px;
        text-align: center;
      }
    }
  </style>
  